<template>
  <!-- 题页组件 -->
  <div class="topic_carousel_box">
    <Swiper :loop="false" :autoplay="autoplay">
      <van-swipe-item v-for="item in testList" :key="item.id">
        <div class="title">{{ item.test.name }}</div>
        <ul>
          <li
            v-for="(item2, index) in item.test.option"
            :key="index"
            :class="
              selectStatus(item.id, item2.select, item.type) ? 'active' : ''
            "
            @click="handleSelcet(item, item2.select)"
          >
            <strong>{{ item2.select }}</strong
            >{{ item2.name }}
          </li>
        </ul>
      </van-swipe-item>
    </Swiper>
  </div>
</template>

<script>
import Swiper from "@/components/carousel/Swiper";
import { computed, inject, ref, watchEffect } from "vue";
import { useStore } from "vuex";
export default {
  name: "AnswerCarousel",
  components: { Swiper },
  setup() {
    //不轮播
    const loop = ref(false);
    const autoplay = ref(1 * 60 * 60 * 1000);
    // 数据接收
    const testList = inject("testList");
    // 点击选项
    const store = useStore();
    const handleSelcet = (item, select) => {
      const { id, type } = item;
      console.log(id, type, select);
      // 写入状态库
      store.commit("topic/handelRespond", { id, select, type });
    };
    // 监听selectGather，对应样式
    const selectStatus = computed(() => (id, select, type) => {
      // 拿取selectGather对应的对象
      let temp = store.state.topic.selectGather.find((item) => item.id === id);
      if (type === "one" || type === "judge") {
        //单选||判断
        return temp?.select === select || null;
      } else if (type === "more") {
        //多选
        let setTemp = new Set(temp?.select);
        return setTemp.has(select) || null;
      }
    });
    // 监听题目索引topicIndex从testList拿到当前题
    watchEffect(() => {
      store.commit(
        "topic/handleCurrent",
        testList.value[store.state.topic.status.topicIndex - 1]?.id
      );
    });
    return {
      loop,
      autoplay,
      testList,
      handleSelcet,
      selectStatus,
    };
  },
};
</script>

<style scoped lang="less">
.topic_carousel_box {
  padding: 0.5rem;
  height: 100%;
  box-sizing: border-box;
  .title {
    font-size: 1.05rem;
    margin: 1rem 0;
    text-indent: 2rem;
  }
  ul {
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 10rem;
    box-sizing: border-box;
    li {
      display: flex;
      align-items: center;
      padding: 1rem;
      margin: 0.5rem 0;
      font-size: 0.95rem;
      box-sizing: border-box;
      background-color: #f6f7f9;
      border-radius: 0.3rem;
      strong {
        margin-right: 1rem;
      }
    }
    .active {
      color: red;
      background: rgb(255 234 232);
    }
  }
}
</style>
